.header {
	background-color: #20232a;
	color: #fff;
	overflow-y: hidden;
}

.con {
	max-width: 1220px;
	margin: 0 auto;
	padding: 0 20px;
	overflow-y: hidden;
	display: flex;
}

.logoCon {
	flex: 19;

}

.logo, .title {
	display: block;
	float: left;
}

.logo {
	font-size: 22px;
	line-height: 50px !important;
	color: #61dafb;
	width: 22px;
}

.title {
	color: #61dafb;
	line-height: 50px;
	font-size: 20px;
	font-weight: bold;
	margin-left: 8px;
}

.flex72 {
	flex: 72;
}

.flex22 {
	flex: 22;
}

.info {
	flex: 150px;
	line-height: 50px;
	font-size: 14px;
	color: #fff;
}

.info > span {
	padding: 5px 10px;
	cursor: pointer;
	border-radius: 15px;
	user-select: none;
}

.info > span:hover {
	color: #61dafb;
}

.info > span:active {
	background-color: #373940;
}

.info > span > i {
	color: #6d6d6d;
	margin-left: 6px;
}

@media (min-width: 0px) and (max-width: 599px) {
	.logo, .title, .info {
		line-height: 40px !important;
	}
	.title {
		display: none;
	}
	.logoCon {
		width: 26px !important;
	}
	.flex22 {
		flex: none;
	}
}

@media (min-width: 1280px) {
	.logo, .title, .info {
		line-height: 60px !important;
	}
}

@media (max-width: 876px) {
	.title {
		font-size: 16px;
	}
	.logoCon {
		flex: none;
		width: 89px;
	}
}

@media (max-width: 780px) {
	.info {
		display: none;
	}
}